<template>
  <el-dropdown @command="handleCommand" trigger="click">
    <div class="language-switch">
      <svg-icon icon-class="language" />
      <span>{{ currentLanguage.label }}</span>
      <el-icon class="el-icon--right"><arrow-down /></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item 
          v-for="lang in languages" 
          :key="lang.value"
          :command="lang.value"
          :disabled="lang.value === currentLanguage.value"
        >
          {{ lang.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'

const { locale } = useI18n()

const languages = [
  { value: 'zh-CN', label: '简体中文' },
  { value: 'en-US', label: 'English' }
]

const currentLanguage = computed(() => {
  return languages.find(lang => lang.value === locale.value) || languages[0]
})

const handleCommand = (command: string) => {
  locale.value = command
  localStorage.setItem('locale', command)
  ElMessage.success('语言切换成功')
}
</script>

<style scoped>
.language-switch {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.language-switch:hover {
  background-color: var(--el-fill-color-light);
}

.language-switch .svg-icon {
  margin-right: 8px;
}

.language-switch span {
  margin-right: 4px;
  font-size: 14px;
}
</style>